<template>
	<view class="planet-calendar">
		<swiper :current="currentIndex" @change="handleChange">
			<swiper-item v-for="(period, index) in periodData" :key="index">
				<view class="planet-view">
					<view v-for="item in period.list" :key="item.keyName" :class="{ 'active': item.isSelected}"
						@click="selectItem(item)">
						<view class="month">{{ item.periodName }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';

	// 当前周期索引
	const currentIndex = ref(0);
	const periodData = ref([{
			list: [{
					periodName: '太阳回归',
					keyName: 'sun',
					isSelected: false
				},
				{
					periodName: '月亮回归',
					keyName: 'moon',
					isSelected: false
				},
				{
					periodName: '土星回归',
					keyName: 'first_saturn',
					isSelected: true
				},
				{
					periodName: '木星回归',
					keyName: 'first_jupiter',
					isSelected: false
				},
			]
		},
		{
			list: [{
					periodName: '天王星回归',
					keyName: 'uranus',
					isSelected: false
				},
				{
					periodName: '凯龙回归',
					keyName: 'chiron',
					isSelected: false
				},
				{
					periodName: '土星第二次回归',
					keyName: 'second_saturn',
					isSelected: false
				},
			]
		},
		{
			list: [{
					periodName: '木星第二次回归',
					keyName: 'second_jupiter',
					isSelected: false
				},
				{
					periodName: '木星第三次回归',
					keyName: 'third_jupiter',
					isSelected: false
				}
			]
		}
	])
	// 切换月
	const handleChange = (e) => {
		currentIndex.value = e.detail.current;
	};
	// 选择日期
	const selectItem = (selectedItem) => {
		periodData.value = periodData.value.map((period) => {
			return {
				list: period.list.map((item) => {
					return {
						...item,
						isSelected: item.periodName === selectedItem.periodName, // 选中当前日期
					};
				}),
			};

		});
		console.log('选中日期:', selectedItem.periodName);
	};
</script>

<style lang="scss" scoped>
	.planet-calendar {
		height: 80rpx;
		padding: 20rpx;

		.planet-view {
			display: flex;
			justify-content: space-between;
			border-radius: 10rpx;
		}

		.planet-view>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10rpx;

			view {
				line-height: 48rpx;
				text-align: center;
				font-size: 28rpx;
				color: #A6A6A6;
				background: #F9F9F9;
				padding: 2rpx 18rpx;
				border: 1px solid #F9F9F9;
				border-radius: 30rpx;
			}
		}

		.planet-view>view.today {
			.month {
				/* 当月样式 */
				border: 1px solid #FF9281;
				background-color: #fff;
			}
		}

		.planet-view>view.active {
			.month {
				font-weight: 500;
				font-size: 28rpx;
				color: #fff;
				background: #FF9281;
				border: 1px solid #FF9281;
			}
		}
	}
</style>